import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "@redux-devtools/extension";
import { produce } from "immer";

// 引入定义好的 actionType 的常量
import { INC, DNC, INCBYNUM } from "./action-types";

// 创建一个中间件
const immerMiddle = (storeAPI: any) => (next: any) => (action: any) => {
  // ...

  // 将 当前的 state 数据，先对其处理成 immer 处理之后的数据。
  produce(storeAPI.getState(), (newState: any) => newState);

  // next
  next(action);
};

const initialState = {
  count: 0,
};

function rootReducer(state = initialState, action: any) {
  switch (action.type) {
    case INC:
      console.log("state", state);
      // 这边已经简化了我们的 state 操作，但还是有点麻烦，在这儿需要调用 immer produce 的代码
      //      能否更简洁了？
      //      方案就是，做一个 immer 的中间件，
      // return produce(state, (newState) => {
      //   newState.count++;
      // });

      state.count++;
    case DNC:
      // return produce(state, (newState) => {
      //   newState.count--;
      // });

      state.count--;
    case INCBYNUM:
      // return produce(state, (newState) => {
      //   newState.count += action.payload;
      // });

      state.count += action.payload;
    default:
      return state;
  }
}

export default createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(immerMiddle))
);
